<template>
	<el-form :model="biaoDan" :rules="yanZhengGuiZe" ref="yanZhengbiaoDan" label-width="80px">
		<el-form-item label="标题" prop='biaoTi'>
			<el-input v-model="biaoDan.biaoTi"></el-input>
		</el-form-item>
		<el-form-item label="模板" prop='muBan'>
			<el-select v-model="biaoDan.muBan" placeholder="请选择文章模板">
				<el-option v-for="m of muBanXuanZe" :label="m" :value="m"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="栏目" prop='lHao'>
			<el-select v-model="biaoDan.lHao" placeholder="请选择栏目">
				<el-option v-for="l of lanMuXuanZe" :label="l.biaoTi" :value="l.lHao"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="内容">
			<div ref="editor"></div>
		</el-form-item>
		<el-form-item label="同步内容" hidden>
			<el-input type="textarea" v-model="bianJiQiNeiRong.neiRong"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="onSubmit('yanZhengbiaoDan')">{{anNiuNeiRong}}</el-button>
			<el-button @click="resetForm('yanZhengbiaoDan')">取消</el-button>
		</el-form-item>
	</el-form>
	<el-dialog
	  title="提示"
	  v-model="tanChuangXianShi"
	  width="30%">
	  <span>{{fanHuiWenBen}}</span>
	</el-dialog>
</template>

<script>
	import {
		onMounted,
		onBeforeUnmount,
		ref,
		reactive,
		computed,
		inject
	} from 'vue';
	import WangEditor from "wangeditor";
	export default {
		setup() {
			const editor = ref();
			const anNiuNeiRong = ref('立即创建');
			const faBuLeiXing = ref('zengWenZhang');
			let zhuJiDiZhi = inject('zhuJiDiZhi');
			let muBanXuanZe = reactive({});
			let lanMuXuanZe = reactive([]);
			let hang = inject('hang');
			const biaoDan = reactive({
				biaoTi: '',
				muBan: '',
				lHao: '',
				riQi:''
			});
			const bianJiQiNeiRong = reactive({
				neiRong: ''
			});
			let instance;
			if (hang) {
				for (let r in biaoDan) {
					biaoDan[r] = hang[r];
					biaoDan.wHao = hang.wHao
				}
				anNiuNeiRong.value = '确定修改';
				faBuLeiXing.value = 'gaiWenZhang';
			}
			let ed = computed(() => instance);
			onMounted(() => {
				//获取模板信息
				fetch(zhuJiDiZhi + 'sytht/jieKou/chaMuBan', {
						method: 'get',
						mode: 'cors',
						credentials: 'include'
					})
					.then(function(a) {
						return a.json();
					})
					.then(function(json) {
						Object.assign(muBanXuanZe,json)
					})
				//获取栏目信息
				fetch(zhuJiDiZhi + 'sytht/jieKou/chaLanMu', {
						method: 'get',
						headers: {
							'Content-Type': 'application/json'
						},
						mode: 'cors',
						credentials: 'include'
					})
					.then(function(a) {
						return a.json();
					})
					.then(function(json) {
						for (let x of json) {
							let a = {};
							a.lHao = x.lHao;
							a.biaoTi = x.biaoTi;
							lanMuXuanZe.push(a);
						}
					})
				
				instance = new WangEditor(editor.value);
				//自定义上传图片函数
				instance.config.customUploadImg = async function (resultFiles, insertImgFn) {
				    let shuJu = new FormData();
					shuJu.append('wenJian', resultFiles[0]);
				    await fetch(zhuJiDiZhi+'sytht/shangChuan', {
				    		method: 'post',
				    		body: shuJu,
				    		mode: 'cors',
				    		credentials: 'include'
				    	})
				    	.then(function(a) {
				    		return a.json();
				    	})
				    	.then(function(b) {
							insertImgFn(b.url)
				    	})
				}
				Object.assign(instance.config, {
					onchange() {
						bianJiQiNeiRong.neiRong = instance.txt.html();
					},
				});
				instance.create();
				if (hang) {
					instance.txt.html(hang.neiRong)
				}
			});
			onBeforeUnmount(() => {
				instance.destroy();
				instance = null;
			});
			return {
				biaoDan,
				editor,
				bianJiQiNeiRong,
				zhuJiDiZhi,
				anNiuNeiRong,
				muBanXuanZe,
				lanMuXuanZe,
				faBuLeiXing,
				ed
			};
		},
		data() {
			return {
				yanZhengGuiZe: {
					biaoTi: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}, ],
					muBan: [{
						required: true,
						message: '请选择模板',
						trigger: 'change'
					}, ],
					lHao: [{
						required: true,
						message: '请选择父栏目',
						trigger: 'change'
					}, ]
				},
				tanChuangXianShi: false,
				fanHuiWenBen: ''
			}
		},
		emits: ['shuaXin', 'guanBiTanChuang'],
		methods: {
			async onSubmit(f) {
				let vm = this;
				vm.$refs[f].validate(async (valid) => {
					if (valid) {
						vm.tanChuangXianShi = true;
						let data = Object.assign(vm.biaoDan, vm.bianJiQiNeiRong);
						await fetch(vm.zhuJiDiZhi + 'sytht/jieKou/' + vm.faBuLeiXing, {
								method: 'post',
								body: JSON.stringify(data),
								headers: {
									'Content-Type': 'application/json'
								},
								mode: 'cors',
								credentials: 'include'
							})
							.then(function(a) {
								return a.text();
							})
							.then(function(b) {
								if (b.includes('登录页面')) {
									b = '请登录';
								};
								vm.fanHuiWenBen = b;
								if (b == '发布成功') {
									vm.$refs[f].resetFields();
									vm.ed.txt.clear()
									setTimeout(() => {
										vm.tanChuangXianShi = false;
										
									},2000)
								}
								if (b == '修改成功') {
									setTimeout(() => {
										vm.$emit('guanBiTanChuang')
									},2000)
								}
							})
						vm.$emit('shuaXin')
					} else {
						console.log('发布错误!!');
						return false;
					}
				});
			},
			resetForm(f) {
				this.$emit('guanBiTanChuang')
				this.$refs[f].resetFields();
				this.ed.txt.clear()
			}
		}
	}
</script>

<style scoped>
	.el-form {
		margin: 20px;
	}
</style>
